<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px; border: 2px solid yellow"></div>
</body>
<script type="text/javascript">
    var div_id1 = document.getElementById("main");
    var echart1 = echarts.init(div_id1);
    option = {
        backgroundColor: '#2c343c',

        title: {
            text: '某APP用户类型分布',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc',
                fontSize: 30,
            }
        },

        legend:{
            orient: 'vertical',
            x: 'right', y: 'bottom',
            itemGap: 20, itemWidth:50, itemHeight: 10,
            data: ['流失用户', '回流用户', '连续活跃用户', '新用户', '活跃用户'],
            textStyle: {fontSize: 20, fontWeight: '5',color: '#ccc'}
        },

        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
            '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
            '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'],

        series: [
            {
                name: '用户类型',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 183472, name: '流失用户'},
                    {value: 6546, name: '回流用户'},
                    {value: 524, name: '连续活跃用户'},
                    {value: 91, name: '新用户'},
                    {value: 0, name: '活跃用户'}
                ]
            }
        ]
    };
    echart1.setOption(option);
</script>
</html>